<template>
  <common-page>
    <div slot="header">
      <el-button @click="goBack">返回</el-button>
    </div>
    <common-list-tabs slot="tabs">
      <common-tabs slot="tabs" v-model="page" @tab-click="tabChange">
        <el-tab-pane label="告警信息" name="alarm"></el-tab-pane>
        <el-tab-pane label="目标IP信息" name="targetIpInfo"></el-tab-pane>
        <el-tab-pane label="关联日志" name="journal"></el-tab-pane>
      </common-tabs>
    </common-list-tabs>

    <component
      slot="content"
      :is="page"
      :key="page"
      @change="change"
      :params="params"
      :detail="detail"
    ></component>
  </common-page>
</template>

<script>
import Alarm from "./components/alarm.vue";
import TargetIpInfo from "./components/targetIpInfo.vue";
import Journal from "./components/journal.vue";
export default {
  name: "AlarmInfo",
  components: { Alarm, TargetIpInfo, Journal },
  props: {
    targetIp: {
      type: Object,
      default: () => {},
    },
    detail: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      page: "alarm",
      params: this.targetIp,
    };
  },
  mounted() {},
  methods: {
    change(to, params) {
      this.params = params;
      this.page = `${to}`;
    },
    tabChange() {
      this.params = this.targetIp;
    },
    goBack() {
      this.$emit("close");
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .common-page-content {
  overflow-y: scroll !important;
}
::v-deep .common-page-content {
  background: #eeeeee;
  height: 100%;
}
::v-deep .el-tabs__item {
  height: 43px !important;
}
::v-deep .common-header-title-wrap {
  padding: 0;
  .common-title {
    min-width: 0 !important;
  }
  .common-header-tabs {
    border: 0;
    margin-left: 0;
  }
}
::v-deep .el-tabs__nav-wrap::after {
  background-color: transparent !important;
}
</style>
